<template>
	<view class="targetDetails">
		<view class="targetDetails-box">
			<view class="targetDetails-box-tag">
				<view :class="targetItem.type==1?'company':'' || targetItem.type==2?'department':'' || targetItem.type==3?'team':'' || targetItem.type==4?'personage':''">
					{{[targetItem.type==1?'公司':''|| targetItem.type==2?'部门':''||targetItem.type==3?'团队':''||targetItem.type==4?'个人':'']}}
				</view>
			</view>
			<view class="targetDetails-box-relevanceTitle">
				<view>
					<view class="targetDetails-box-relevanceTitle-isAlign" v-if="targetItem.keyResultId" @click="alignPopup('true')">
						<image src="@/static/image/target/align_icon.png"></image>
						<view style="color: #6fa71f;">已对齐</view>
					</view>
					<view class="targetDetails-box-relevanceTitle-isAlign" v-else @click="alignPopup('false')">
						<image src="@/static/image/target/noneAlign_iocn.png"></image>
						<view style="color: #c20116;">未对齐</view>
					</view>
				</view>
				
			</view>
			<view class="targetDetails-box-info">
				<view class="targetDetails-box-info-title"  @click="redactClick">
					<view class="targetDetails-box-info-title-index" v-if="sort">{{sort}}</view>
					<view class="targetDetails-box-info-title-text">{{targetItem.objectivesName}}</view>
				</view>
				<view class="targetDetails-box-info-love">
					<view class="targetDetails-box-info-love-value" @click="selectOconfidence">
						{{[targetItem.confidenceValue==1?90:'' || targetItem.confidenceValue==2?70:'' || targetItem.confidenceValue==3?60:'']}}
					</view>
					<image src="@/static/image/target/heart-fill_icon.png" @click="selectOconfidence"></image>
				</view>
			</view>
			<view class="targetDetails-box-progress">
				<progress :percent="targetItem.progressValue" border-radius='10' show-info active stroke-width="15" activeColor='#409eff' />
			</view>
			<view class="targetDetails-box-bottom">
				<view class="targetDetails-box-bottom-record" @click="recordBtn">记录</view>
				<view class="targetDetails-box-bottom-relevance" >
						<view class="relevanceTag" @click="tagClick('Otask')" v-if="targetItem.taskId">
							<view>任务</view>
						</view>
						<view class="relevanceTag" @click="tagClick('Oproject')" v-if="targetItem.projectId">
							<view>项目</view>
						</view>
					<view v-if="!targetItem.taskId || !targetItem.projectId" @click="taskBtn">关联</view>
				</view>
			</view>
		</view>
		<view class="createTarget-achievement">
			<view class="createTarget-achievement-list">
				<view class="createTarget-achievement-list-item" v-for="(item,index) in targetItem.list" :key='index'>
					<view class="createTarget-achievement-list-item-left">
						<view class="createTarget-achievement-list-item-left-index">成果{{index+1}}</view>
						
					</view>	
					<view class="createTarget-achievement-list-item-right">
						<view>
							<view class="alignState" v-if="item.align == 1" @click="KRalignPopup(item,'true')">
								<image src="@/static/image/target/align_icon.png"></image>
								<view style="color: #6fa71f;">已对齐</view>
							</view>
							<view class="alignState" v-else @click="KRalignPopup(item,'false')">
								<image src="@/static/image/target/noneAlign_iocn.png"></image>
								<view style="color: #c20116;">未对齐</view>
							</view>
						</view>
						<view class="createTarget-achievement-list-item-right-content">
							<view style="display: flex;">
								<view class="relevanceTag" @click="tagClick('KRtask',item)" v-if="item.taskId">
									<view style="width: 50rpx;">任务</view>
								</view>
								<view class="relevanceTag" @click="tagClick('KRproject',item)"  v-if="item.projectId">
									<view style="width: 50rpx;">项目</view>
								</view>								
							</view>
							<view>{{item.content}}</view>
								
						</view>
						<view class="createTarget-achievement-list-item-right-setting">
							<view class="createTarget-achievement-list-item-right-setting-icon" @click="iocnBtn('schedule',item)">
								<image v-if="item.progressStatus==1" src="@/static/image/target/normal_icon.png"></image>
								<image v-if="item.progressStatus==2" src="@/static/image/target/risk_icon.png"></image>
								<image v-if="item.progressStatus==3" src="@/static/image/target/overdue_icon.png"></image>
								<image v-if="!item.progressStatus" src="@/static/image/target/noneState_icon.png"></image>
								{{item.progressValue}}%
							</view>
							<view class="createTarget-achievement-list-item-right-setting-icon" @click="selectKRConfidence(item)">
								<image src="@/static/image/target/heart_icon.png"></image>
								{{[item.confidenceValue==1?90:0 || item.confidenceValue==2?70:0 || item.confidenceValue==3?60:0]}}%
							</view>
							<view class="createTarget-achievement-list-item-right-setting-icon" @click="iocnBtn('weight',item)">
								<image src="@/static/image/target/weight_icon.png"></image>
								{{item.weightRatio}}%
							</view>
							<view class="menuIcon" @click="menu(item)">
								<image src="@/static/image/target/menu_icon.png" class="menuIcon-icon"></image>
							</view>
						</vie>
					</view>
				</view>
			</view>
			</view>
		</view>
		<view v-if="userInfo.employeeId">
			<view class="targetDetails-delete" v-if="newUserId=='null' && userInfo.employeeId === targetItem.employeeId">
				<view><button class="targetDetails-delete-btn" type="default" @click="deleteTarget">删除目标</button></view>
			</view>
		</view>
		
		<popUp
		:popUpType='popUpType'
		:isShow="show"
		:userData="userInfo"
		:selectData="targetItem"
		:KRitemData='KRitemData'
		@closePopUp='closePopUp'
		@updateData='updateData'
		></popUp>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import popUp from '../component/pop-up.vue';
	export default {
		components: {
			popUp,
		},
		data() {
			return {
				show:false,
				popUpType:'',
				userInfo:{}, 
				KRitemData:{},
				targetItem:{},
				userID:'',
				targetID:'',
				sort:'',
				newUserId:'',
				menuList:['对齐','关联','删除'],
				confidenceList: [ // 信心指弹出框选择框
					'基础目标（90%以上信心就能够完成）',
					'正常目标（70~90%信心就能够完成）',
					'基础目标（60~70%信心就能够完成）'
				],
			}
		},
		onLoad(option) {
			this.targetID = option.id
			this.sort = option.sort
			this.newUserId = option.newUserId
			this.$nextTick(()=>{
				let data = getApp().globalData.userInfo
				data.employee.forEach(item=>{
					if(item.isDefault == '0'){
						this.userInfo = item
					}
				})
			})
			this.getInfo()
		},
		methods: {
			getInfo(id){
				api.getTargetDetail(this.targetID).then(res=>{
					if(res.code == 0){
						this.targetItem = res.data.result
					}
				})
			},
			closePopUp(){
				this.show = false
				this.popUpType = ''
				this.getInfo()
			},
			alignPopup(type){ // O对齐目标弹窗
				if(this.newUserId!=="null"){
					return
				}
				if(this.targetItem.employeeId === this.userInfo.employeeId){
					if(type == 'true'){
						this.popUpType = 'viewOorientation'
					}else{
						this.popUpType = 'orientation'
					}
					this.show = true
				}
				
				
			},
			KRalignPopup(item,type){ // KR对齐目标弹窗
				if(this.newUserId!=="null"){
					return
				}
				if(this.userInfo.employeeId === this.targetItem.employeeId){
					if(type == 'true'){
						this.popUpType = 'viewKRorientation'
					}else{
						this.popUpType = 'KRorientation'
					}
					this.show = true
					this.KRitemData = item
				}
			},
			recordBtn(){ // 请求进度记录
				this.show =  true
				this.popUpType = 'schedule'
			},
			taskBtn(){ // 关联弹窗
				if(this.newUserId!=="null"){
					return
				}
				if(this.userInfo.employeeId === this.targetItem.employeeId){
					this.show =  true
					this.popUpType = 'Orelevance'
				}
			},
			menu(item){
				if(this.newUserId!=="null"){
					return
				}
				if(this.userInfo.employeeId === this.targetItem.employeeId){
					let that = this
					uni.showActionSheet({
						itemList: that.menuList,
						success: function(res) {
							if(res.tapIndex == 0){
								if(item.align == 1){
									that.popUpType = 'viewKRorientation'
								}else{
									that.popUpType = 'KRorientation'
								}
								that.show =  true
								that.KRitemData = item
							}
							if(res.tapIndex == 1){
								that.show =  true
								that.popUpType = 'KRrelevance'
								that.KRitemData = item
							}
							if(res.tapIndex == 2){
								if(that.targetItem.list.length<3){
									return uni.showToast({
											title: '至少保留2个关键成果',
											icon:'none',
											duration: 1000
										});	
								}
								api.deleteKrById(item.id).then(res=>{
									if(res.code == 0){
										that.getInfo()
										uni.showToast({
											title: '删除成功',
											icon:'none',
											duration: 1000
										});	
									}
								})
							}
						},
					})
				}
			},
			iocnBtn(type,item){
				if(this.newUserId!=="null"){
					return
				}
				if(this.userInfo.employeeId === this.targetItem.employeeId){
					switch (type) {
					    case "schedule": // 更新成果完成度弹窗
							this.show = true
							this.popUpType = 'updateResult'
							this.KRitemData = item
					        break;
						case "weight": // 调整权重
							this.show = true
							this.popUpType = 'weight'
							this.KRitemData = item
						    break;
					    default: 
					}
				}
			},
			selectOconfidence(){// 选择O信心值
				if(this.newUserId!=="null"){
					return
				}
				if(this.userInfo.employeeId === this.targetItem.employeeId){
					let that = this;
					uni.showActionSheet({
						itemList: that.confidenceList,
						success: function(res) {
							let data = {
								confidenceValue: res.tapIndex + 1,
								id: that.targetItem.id
							}
							api.setObjectivesConfidenceValue(data).then(res=>{
								if(res.code == 0){
									that.getInfo()
									uni.showToast({
										title: '设置成功',
										icon:'none',
										duration: 1000
									});
								}
							})
						}
					});
				}
			},
			selectKRConfidence(item){ // 选择KR信心值
				if(this.newUserId!=="null"){
					return
				}
				if(this.userInfo.employeeId === this.targetItem.employeeId){
					let that = this;
					uni.showActionSheet({
						itemList: that.confidenceList,
						success: function(res) {
							let data = {
								confidenceValue: res.tapIndex + 1,
								id:item.id
							}
							api.setConfidenceValue(data).then(res=>{
								if(res.code == 0){
									that.getInfo()
									uni.showToast({
										title: '设置成功',
										icon:'none',
										duration: 1000
									});
								}
							})
						}
					});
				}
			},
			deleteTarget(){
				let that = this
				uni.showModal({
				    content: '目标删除不可恢复',
				    success: function (res) {
				        if (res.confirm) {
							api.deleteObjectiveById(that.targetItem.id).then(res=>{
								if(res.code==0){
									uni.showToast({
										title: '删除成功',
										icon:'none',
										duration: 1000
									});
									uni.navigateBack();
								}
							})
				        }
				    }
				});
			},
			redactClick(){ // 跳转编辑页
				if(this.newUserId!=="null"){
					return
				}
				if(this.userInfo.employeeId === this.targetItem.employeeId){
					uni.navigateTo({
					    url: '/subcontractList/targetAdmin/createTarget/createTarget?targetItem='+ JSON.stringify(this.targetItem)
					})
				}
			},
			
			tagClick(type,item){
				let url
				if(type == 'KRtask'){
					url = '/pages/mask/detail/detail?id=' + item.taskId
				}
				if(type=='KRproject'){
					url = '/subcontractList/project/detail/index?id=' + item.projectId
				}
				if(type == 'Otask'){
					url = '/pages/mask/detail/detail?id=' + this.targetItem.taskId
				}
				if(type == 'Oproject'){
					url = '/subcontractList/project/detail/index?id=' + this.targetItem.projectId
				}
				
				uni.navigateTo({
					url
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.targetDetails{
	background-color: #f4f5f7;
	padding: 30rpx;
	height: 100vh;
	&-box{
		width: 100%;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 -8px 8px 0 rgba(0, 0, 0, 0.08);
		&-tag{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			view{
				font-size: 24rpx;
				padding: 8rpx 30rpx;
				color: #fff;
				background-color: #1378ea;
				border-top-right-radius: 15rpx;
				-webkit-border-bottom-left-radius: 15rpx;
			}
			.company{
				background-color: #fa5252;
			}
			.department{
				background-color: #fdb341;
			}
			.team{
				background-color: #45d677;
			}
			.personage{
				background-color: #2f94f3;
			}
		}
		&-relevanceTitle{
			font-size: 26rpx;
			margin-left: 110rpx;
			&-isAlign{
				display: flex;
				align-items: center;
			}
			image{
				width: 25rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}
		}
		&-bottom{
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1px solid #ededed;
				
			&-record,&-relevance{
				width: 50%;
				height: 85rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			&-record{
				border-right: 1px solid #ededed;
			}
		}			
		&-info{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			margin: 20rpx 0;
			&-title{
				flex: 1;
				display: flex;
				align-items: center;
				&-index{
				    width: 60rpx;
				    height: 60rpx;
				    border-radius: 30rpx;
				    color: #409eff;
				    background-color: #e1effd;
				    display: flex;
				    align-items: center;
				    justify-content: center;
					margin-right: 20rpx;
				}
				&-text{
					flex: 1;
					font-weight: 700;
				}	
			}
			&-love{
				position: relative;
				&-value{
					z-index: 10;
					position: absolute;
					content: "";
					top: 8rpx;
					right: 11rpx;
					font-size: 19rpx;
					color: #fff;
				}
				image{
					width: 45rpx;
					height: 45rpx;
				}
			}			
		}
		&-progress{
			padding: 0 60rpx 35rpx 60rpx;
		}
	}
	.relevanceTag{
		// width: 0rpx;
		font-size: 24rpx;
		background-color: #dbf1e1;
		color: #19be6b;
		border: 1px solid #71d5a1;
		display: flex;
		justify-content: center;
		margin-right: 15rpx;
		border-radius: 6rpx;
		view{
			padding: 0rpx 15rpx;
		}			
	}
	.createTarget-achievement{
		background: #fff;
		border-radius: 15rpx;
		margin-top: 30rpx;    
		&-title{
			display: flex;
			align-items: center;
			padding:30rpx;
			color: #4ba4ff;
			border-bottom: 2rpx solid #dee1e8;
		}
		&-list{
			margin-bottom: 120rpx;
			&-item{
				display: flex;
				border-bottom: 1rpx solid #dee1e8;
				padding: 35rpx 0;
				&-left{
						&-index{
							width: 110rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: #9b9b9b;
							margin-left:30rpx;
						}
				}
				&-right{
					flex: 1;
					padding-right: 30rpx;
					.alignState{
						display: flex;
						align-items: center;
						margin-bottom: 15rpx;
						font-size: 26rpx;
						image{
							width: 25rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}
					}
					&-content{
						display: flex;
						align-items: center;
					}
					&-setting{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 30rpx;
						image{
							width: 30rpx;
							height: 30rpx;
							margin-right: 8rpx;
						}
						.menuIcon{
							display: flex;
							align-items: center;
							height: 35rpx;
							&-icon{
								width: 36rpx;
								height: 10rpx;
							}
						}

						&-icon{
							display: flex;
							align-items: center;
							.menu_icon{
								width: 36rpx;
								height: 10rpx;
							}
						}
					}
					
				}
				&-bottom{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-right: 30rpx;
					&-icon{
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
	&-delete{
		width: 100%;    
		position: fixed;
		left: 0;
		bottom: 30rpx;
		box-sizing: border-box;
		view{
			padding: 0 30rpx;
		}
		&-btn{
			background-color: #d20a0a;
			color: #fff;
		}
	}
}
</style>
